<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .material {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 50px auto;
            font-size: 12px;
            color: #484848;
            border: 1px solid #ddd;
        }

        h3 {
            width: 100%;
            height: 40px;
            background: #f4f5f6;
            font: normal 14px/40px "Simhei";
            color: #888;
        }

        .buy-tab input {
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        .buy-tab li {
            list-style: none;
            float: left;
        }

        .buy-tab label {
            display: block;
            width: 80px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            background: #cf4735;
            cursor: pointer;
        }

        .now-pos {
            margin-left: 8%;
        }

        .buy-tab ul li:nth-of-type(2),
        .buy-tab ul li:nth-of-type(3),
        .buy-tab ul li:nth-of-type(4),
        .buy-tab ul li:nth-of-type(5) {
            margin-left: 5px;
        }

        [class*="allbuy"] {
            display: none;
        }

        [class*="allbuy"] table {
            width: 100%;
            text-align: center;
            line-height: 30px;
        }

        [class*="allbuy"] table td {
            border: 1px solid #cacbcb;
        }

        [id^="pro"]:checked~[class^="allbuy"] {
            display: block;
            position: absolute;
            width: 84%;
            border: 1px solid #cacbcb;
            border-radius: 5px;
            padding: 28px 40px 30px;
            left: 8%;
            top: 83px;
        }

        [id^="pro"]:checked~label {
            position: relative;
            z-index: 1;
            border: 1px solid #cacbcb;
            border-bottom: none;
            background: #fff;
            height: 28px;
        }
    </style>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>练习task01_03</title>
        <style>
            a {
                letter-spacing: .1em;
                transition: text-shadow .3s;
            }

            a:hover {
                text-shadow: 0 0 .65px #333, 0 0 .65px #333;
            }
        </style>
    </head>

    <body>
        <p>
            <a href="#0">a标签使用阴影加粗效果</a>
        </p>
        <div class="material">
            <h3>第一组项目</h3>
            <div class="buy-tab">
                <ul>
                    <li class="now-pos">
                        <input type="radio" name="pro-material" id="pro-1" checked>
                        <label for="pro-1">项目一</label>
                        <div class="allbuy-1">
                            <table>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                                <tr>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                    <td>购买材料一</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li>
                        <input type="radio" name="pro-material" id="pro-2">
                        <label for="pro-2">项目二</label>
                        <div class="allbuy-2">
                            <table>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                                <tr>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                    <td>购买材料二</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li>
                        <input type="radio" name="pro-material" id="pro-3">
                        <label for="pro-3">项目三</label>
                        <div class="allbuy-3">
                            <table>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                                <tr>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                    <td>购买材料三</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li>
                        <input type="radio" name="pro-material" id="pro-4">
                        <label for="pro-4">项目四</label>
                        <div class="allbuy-4">
                            <table>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                                <tr>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                    <td>购买材料四</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                    <li>
                        <input type="radio" name="pro-material" id="pro-5">
                        <label for="pro-5">项目五</label>
                        <div class="allbuy-5">
                            <table>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                                <tr>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                    <td>购买材料五</td>
                                </tr>
                            </table>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>

    </html>
</body>

</html>